<template>
  <div class='sprint'>
    <div class='header'>
      <el-button class='el-icon-plus addSprintBtn' @click='addSprintBtn' size="medium">添加迭代</el-button>
      <!--
      <el-select v-model='group' placeholder='小组'>
        <el-option
          v-for='item in groupList'
          :key='item.groupId'
          :label='item.groupName'
          :value='item.groupId'>
        </el-option>
      </el-select>
      <search-box class='searchBox' @search='search'></search-box>
      -->
    </div>
    <div class='content'>
      <el-table
        :data='sprintList'
        style='width: 100%'>
        <el-table-column
          prop='sprintName'
          label='迭代名称'
          width='190'>
        </el-table-column>
        <el-table-column
          prop='sprintStatus'
          label='迭代状态'
          width='150'>
        </el-table-column>
        <el-table-column
          prop='sprintStartTime'
          label='开始时间'
          width='180'>
        </el-table-column>
        <el-table-column
          prop='sprintEndTime'
          label='结束时间'
          width='180'>
        </el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <el-button
              size='mini'
              style='backgroundColor:#3c8dbc;color:#fff'
              @click='checkLog(scope.$index, scope.row)'>查看日志</el-button>
            <el-button
              size='mini'
              type='danger'
              @click='modifyDialog(scope.$index, scope.row)'>修改迭代</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <el-pagination
      layout='prev, pager, next'
      @current-change='changePage'
      :page-count='pages'>
    </el-pagination> -->
    <el-dialog title="新增迭代" :visible.sync="sprintDialogVisible" width='40%'>
      <el-form :model='newSprint'>
        <el-form-item label="迭代名称" label-width="120px">
         <el-input v-model="newSprint.sprintName" ref='newSprintInput' auto-complete="off"></el-input>
        </el-form-item>
      <el-form-item label="开始时间" label-width="120px">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="newSprint.startStamp"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="结束时间" label-width="120px">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="newSprint.endStamp"></el-date-picker>
        </el-col>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sprintDialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled='addDisabled' @click="addSprint">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改迭代" :visible.sync="modifyDialogVisible" width='40%'>
      <el-form :model='modifySprint'>
        <el-form-item label="迭代名称" label-width="120px">
         <el-input v-model="modifySprint.sprintName" ref='newSprintInput' auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="迭代状态" label-width="120px">
        <el-select v-model='modifySprint.sprintStatus' placeholder='迭代状态'>
          <el-option
            v-for='(item, index) in sprintStatus'
            :key='item'
            :label='item'
            :value='index'>
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled='modifyDisabled' @click="modifyHandle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import searchBox from '@/components/searchBox'
import { _addSprint, _getSprintList, _getGroupList, _modifySprint } from '../common/api'
import config from '../common/config'
export default {
  components: {
    searchBox
  },
  created () {
    this.getGroupList()
    this.getSprintList()
  },
  data () {
    return {
      sprintDialogVisible: false,
      modifyDialogVisible: false,
      addDisabled: false,
      modifyDisabled: false,
      pageNum: 1,
      pages: 1,
      keyWords: '',
      group: '',
      newSprint: {},
      modifySprint: {},
      sprintList: [],
      groupList: [],
      sprintStatus: config.sprintStatus
    }
  },
  watch: {
    $route () {
      this.getSprintList()
    },
    group (groupId) {
      this.$router.push({
        path: '/sprint',
        query: {
          ...this.$route.query,
          groupId
        }
      })
    }
  },
  methods: {
    getGroupList () {
      _getGroupList().then(res => {
        this.groupList = res.filter(item => item.group_status !== 0)
      })
    },
    addSprintBtn () {
      this.sprintDialogVisible = true
      this.$nextTick(_ => {
        this.$refs.newSprintInput.$refs.input.focus()
      })
    },
    addSprint () {
      let { sprintName, startStamp, endStamp } = this.newSprint
      if (!sprintName || !startStamp || !endStamp) {
        this.$message({
          type: 'error',
          message: '请填写完整'
        })
        return
      }
      if (startStamp > endStamp) {
        this.$message({
          type: 'error',
          message: '时间填写有误'
        })
        return
      }
      let name = this.newSprint.sprintName
      let repeat = this.sprintList.filter(a => (a.sprintName === name))
      if (repeat.length > 0) {
        this.$message({
          type: 'error',
          message: '迭代名称重复'
        })
        return
      }
      startStamp = this.$moment(startStamp).format('YYYY-MM-DD')
      endStamp = this.$moment(endStamp).format('YYYY-MM-DD')
      this.addDisabled = true
      _addSprint(sprintName, startStamp, endStamp).then(res => {
        this.addDisabled = false
        if (+res.state === config.SUCCESS) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.getSprintList()
          this.sprintDialogVisible = false
          this.newSprint.sprintName = ''
        } else {
          this.$message({
            type: 'error',
            message: res.details
          })
        }
      }).catch(e => {
        this.addDisabled = false
        this.$message({
          type: 'error',
          message: '添加失败'
        })
      })
    },
    getSprintList () {
      let query = this.$route.query
      query = {
        ...query,
        keyWords: this.keyWords
      }
      _getSprintList(query).then(res => {
        this.sprintList = res.reverse().map(item => ({
          ...item,
          sprintStatus: config.sprintStatus[item.sprintStatus],
          sprintStartTime: this.$moment(item.sprintStartTime).format('YYYY-MM-DD'),
          sprintEndTime: this.$moment(item.sprintEndTime).format('YYYY-MM-DD')
        }))
      }).catch(e => {
        this.$message({
          type: 'error',
          message: '获取迭代错误'
        })
      })
    },
    modifyDialog (index, row) {
      this.modifyDialogVisible = true
      this.modifySprint = {
        ...row
      }
    },
    modifyHandle () {
      const body = {
        sprintId: this.modifySprint.sprintId,
        sprintName: this.modifySprint.sprintName,
        sprintStatus: this.modifySprint.sprintStatus
        // sprintStatus: config.sprintStatus.findIndex(x => x === this.modifySprint.sprintStatus)
      }
      this.modifyDisabled = true
      _modifySprint(body).then(res => {
        this.modifyDisabled = false
        if (+res.state === config.SUCCESS) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.getSprintList()
          this.modifyDialogVisible = false
          this.modifySprint = {}
        } else {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        }
      }).catch(e => {
        this.modifyDisabled = false
        this.$message({
          type: 'error',
          message: '修改失败'
        })
      })
    },
    changePage (page) {
      // this.pageNum = page
      // this.getUserList()
    },
    search (keyWords) {
      this.keyWords = keyWords
      // this.pageNum = 1
      this.getSprintList()
    },
    checkLog (index, row) {
      this.$router.push(`/log?sprintId=${row.sprintId}`)
    }
  }
}
</script>
<style lang='sass'>
.sprint
  background: #fff
  height: auto
  min-height: 100%
  padding: 20px
  box-sizing: border-box
  .searchBox
    display: inline-block
  .el-select
    width: 100px
    vertical-align: top
  .el-select .el-input input
    height: 37px
  .content
    margin: 30px auto
  .addSprintBtn
    height: 37px
    margin-right: 30px
    vertical-align: top
</style>
